<template>
  <div>
    <div id="gauge1"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  data() {
    return {
      chart: ""
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
    this.fetchList()
  },
  methods: {
    async fetchList() {
      const response = await this.$http.get("alerts/sentimentPercentages")
      if (response.status == 200) {
        const data = response.data
        this.negativePer = data.negative
        this.updateChartData()
      }
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("gauge1"));
      this.chart.setOption({
        title: {
          text: "舆情预警",
          textStyle: {
            align: "center",
            color: "#fff",
            fontSize: 20
          },
          top: "-1%",
          left: "44%"
        },
        tooltip: {
          formatter: "{a} <br/>{c} {b}"
        },
        series: [
          {
            name: "负面评论占比数",
            type: "gauge",
            color: ["#f00"],
            min: 0,
            max: 100,
            splitNumber: 10,
            radius: "80%",
            center: ["50%", "55%"],
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 10,
                color: [
                  [0.5, "#203add"],
                  [1, "#0d1758"]
                ]
              },
              backgroundColor: "none"
            },
            axisTick: {
              // 坐标轴小标记
              length: 12, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: "auto"
              }
            },
            splitLine: {
              // 分隔线
              length: 5, // 属性length控制线长
              lineStyle: {
                // 属性lineStyle（详见lineStyle）控制线条样式
                color: "rgba(255,255,255,0.7)"
              }
            },
            axisLabel: {
              borderRadius: 1,
              color: "rgba(255,255,255,0.7)",
              padding: 1
            },
            title: {
              fontSize: 13,
              fontColor: "#FFF",
              color: "#FFF",
              paddingTop: 10,
              offsetCenter: [0, "90%"]
            },
            itemStyle: {
              color: "#1092ff"
            },
            detail: {
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              textBorderColor: "#000",
              textBorderWidth: 1,
              textShadowBlur: 1,
              textShadowColor: "#fff",
              textShadowOffsetX: 0,
              textShadowOffsetY: 0,
              paddingTop: 10,
              fontFamily: "digital",
              fontSize: 20,
              width: 30,
              color: "#fff",
              rich: {},
              offsetCenter: [0, "65%"],
              formatter: function (value) {
                return value.toFixed(2) + "%";
              }
            },
            data: [
              {
                value: 0,
                name: ""
              }
            ]
          }
        ]
      });
    },
    updateChartData(){
      const percentage = this.negativePer / 100
      this.chart.setOption({
        series: [{
          axisLine: {
            lineStyle: {
              color: [
                [percentage, "#203add"],
                [1, "#0d1758"]
              ]
            }
          },
          data: [{
            value : this.negativePer,
            name : "负面评论占比数"
          }]
        }]
      })
    }
  },
  beforeDestroy() {
    //   console.log(this.chart);
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

<style lang="scss" scoped>
#gauge1 {
  width: 100%;
  height: 40vh;
  // background-color: #554444;
}
</style>